<!doctype html>
<html lang="en" data-theme="Balzac">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Balzac HTML Template</title>

        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

        <!-- theme -->
        <link id="theme-css" rel="stylesheet" href="css/theme.css">
        <!--[if IE 9]><link rel="stylesheet" href="css/ie9.css"><![endif]-->

    </head>

    <body>

        <div class="bh-header" data-uk-sticky="{top:-1}">
            <div class="bh-navbar">

                <a class="bh-logo uk-visible-large" href="frontpage.html"><div class="uk-navbar-brand"><span class="uk-text-primary">Bal</span>zac</div></a>

                <a class="bh-logo-small uk-hidden-large" href="frontpage.html"><div class="uk-navbar-brand"><span class="uk-text-primary">Bal</span>zac</div></a>

                <!-- img use like this -->
                <!-- <a class="bh-logo" href="frontpage.html">
                    <img class="uk-responsive-height" src="" width="" height="">
                </a> -->

                <nav class="uk-navbar uk-text-center">
                    <div class="bh-navbar-nav-wrapper uk-visible-large">
                        <ul class="uk-navbar-nav">
                            <li class="uk-parent" data-uk-dropdown>
                                <a href="frontpage.html" class="uk-active">Home</a>
                                <div class="uk-dropdown uk-dropdown-navbar">
                                    <ul class="uk-nav uk-nav-navbar">
                                        <li class="uk-nav-header">Styles</li>
                                        <li>
                                            <a href="?style=default">Light</a>
                                        </li>
                                        <li>
                                            <a href="?style=dark">Dark</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="uk-parent" data-uk-dropdown>
                                <a href="#">Pages</a>
                                <div class="uk-dropdown uk-dropdown-navbar">
                                    <ul class="uk-nav uk-nav-navbar">
                                        <li>
                                            <a href="pages-about.html">About Us</a>
                                        </li>
                                        <li>
                                            <a href="pages-team.html">Team</a>
                                        </li>
                                        <li>
                                            <a href="pages-service.html">Service</a>
                                        </li>
                                        <li>
                                            <a href="pages-portfolio.html">Portfolio</a>
                                        </li>
                                        <li>
                                            <a href="pages-contact.html">Contact</a>
                                        </li>
                                        <li>
                                            <a href="pages-faq.html">FAQ</a>
                                        </li>
                                        <li>
                                            <a href="pages-error.html">Error</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="uk-parent" data-uk-dropdown>
                                <a href="shop.html">Shop</a>
                                <div class="uk-dropdown uk-dropdown-navbar uk-dropdown-width-3">
                                    <div class="uk-grid uk-dropdown-grid">
                                        <div class="uk-width-medium-1-3">
                                            <ul class="uk-nav uk-nav-navbar">
                                                <li class="uk-nav-header">Layouts</li>
                                                <li>
                                                    <a href="shop-singleproduct.html">Single Product</a>
                                                </li>
                                                <li>
                                                    <a href="shop-cart.html">Cart</a>
                                                </li>
                                                <li>
                                                    <a href="shop-checkout.html">Checkout</a>
                                                </li>
                                                <li>
                                                    <a href="shop-wishlist.html">Wishlist</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="uk-width-medium-2-3">
                                            <div class="uk-panel">
                                                <div class="uk-panel-badge uk-badge uk-badge-danger">Only now - $99</div>
                                                <a href="shop-singleproduct.html"><img src="http://placehold.it/400x300&text=demo" width="400" height="300" alt="Product Image"></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="uk-parent" data-uk-dropdown>
                                <a href="#">Features</a>
                                <div class="uk-dropdown uk-dropdown-navbar">
                                    <ul class="uk-nav uk-nav-navbar">
                                        <li>
                                            <a href="features-columns.html">Columns</a>
                                        </li>
                                        <li>
                                            <a href="features-positions.html">Positions</a>
                                        </li>
                                        <li>
                                            <a href="features-uikit-elements.html">UIkit Elements</a>
                                        </li>
                                        <li>
                                            <a href="features-theme-elements.html">Theme Elements</a>
                                        </li>
                                        <li>
                                            <a href="features-typography.html">Typhography</a>
                                        </li>
                                        <li>
                                            <a href="features-icons.html">Icons</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="uk-parent" data-uk-dropdown>
                                <a href="blog.html">Blog</a>
                                <div class="uk-dropdown uk-dropdown-navbar">
                                    <ul class="uk-nav uk-nav-navbar">
                                        <li>
                                            <a href="blog-singlepost.html">Single Post</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>

                    <a href="#offcanvas" class="uk-navbar-toggle uk-hidden-large" data-uk-offcanvas></a>

                </nav>

                <div class="bh-toolbar-left uk-visible-large">
                    <a class="bh-search-toggle" href="#" data-uk-toggle="{target:'.bh-search-bar', animation: 'uk-animation-slide-top'}"><i class="uk-icon-search"></i></a>
                </div>

                <div class="bh-toolbar-right">
                    <div class="uk-panel">
                        <ul class="uk-subnav uk-subnav-line">
                            <li>
                                <a href="#offcanvas-cart" data-uk-offcanvas><i class="uk-icon-shopping-cart uk-margin-small-right uk-hidden-small"></i> $209.80 <span class="uk-badge uk-badge-danger uk-badge-notification uk-margin-small-left">2</span></a>
                            </li>
                            <li class="uk-hidden-small">
                                <a href="shop-wishlist.html"><i class=" uk-icon-heart"></i></a>
                            </li>
                            <li class="uk-hidden-small">
                                <a href="#login" data-uk-modal><i class=" uk-icon-user"></i></a>
                            </li>
                            <li class="uk-hidden-small">
                                <a href="#"><i class="uk-icon-power-off"></i></a>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>

            <div class="bh-search-bar uk-hidden">
                <form class="uk-search" data-uk-search>
                    <input class="uk-search-field" type="search" placeholder="Search...">
                </form>
                <a href="#" class="uk-close" data-uk-toggle="{target:'.bh-search-bar'}"></a>
            </div>
        </div>

<div class="bh-position-title">
    <div class="uk-container uk-container-center">
        <div class="uk-panel">
            <h1>UIkit Elements</h1>
        </div>
    </div>
</div>

<div class="bh-position bh-position-default">
    <div class="uk-container uk-container-center">
        <div class="uk-grid uk-grid-divider" data-uk-grid-match data-uk-grid-margin>

            <div class="uk-width-medium-1-5 uk-hidden-small">
                <div class="uk-panel" data-uk-sticky="{top:80, boundary: true}">
                    <ul class="uk-nav uk-nav-side" data-uk-scrollspy-nav="{closest:'li', smoothscroll: {offset:80}}">
                        <li><a href="#elements-panel">Panel</a></li>
                        <li><a href="#elements-button">Button</a></li>
                        <li><a href="#elements-form">Form</a></li>
                        <li><a href="#elements-alert">Alert</a></li>
                        <li><a href="#elements-progress">Progress</a></li>
                        <li><a href="#elements-tab">Tab</a></li>
                        <li><a href="#elements-table">Table</a></li>
                        <li><a href="#elements-overlay">Overlay</a></li>
                        <li><a href="#elements-thumbnail">Thumbnail</a></li>
                    </ul>
                </div>
            </div>

            <div class="uk-width-medium-4-5">
            	<article class="uk-article">

    	            <div class="uk-alert uk-margin-large-bottom">
    	                <p>
                            <i class="uk-icon-info-circle"></i> This template uses the <a href="http://getuikit.com/" target="_blank">UIkit Frontend Framework</a>. A powerful set of components and JavaScript scripts.
                            We provide the entire styling of all UIkit components! Below, you can see some examples of UIkit.
                        </p>
    	            </div>

                    <h2 class="uk-margin-large-top bh-headline-bottom-border" id="elements-panel"><span>Panel</span></h2>

                    <div class="uk-grid" data-uk-grid-margin>

                        <div class="uk-width-medium-1-3">
                            <div class="uk-panel uk-panel-space">
                                <h3 class="uk-panel-title">Panel space</h3>
                                <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipisicing elit, sed do eiusmod tempor. At vero eos et accusam.</p>
                            </div>

                            <div class="uk-panel uk-panel-box">
                                <h3 class="uk-panel-title">Panel box</h3>
                                <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipisicing elit, sed do eiusmod tempor. At vero eos et accusam.</p>
                            </div>
                        </div>

                        <div class="uk-width-medium-1-3">
                            <div class="uk-panel uk-panel-box uk-panel-box-primary">
                                <h3 class="uk-panel-title">Panel box primary</h3>
                                <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipisicing elit, sed do eiusmod tempor. At vero eos et accusam.</p>
                            </div>

                            <div class="uk-panel uk-panel-box uk-panel-box-secondary">
                                <h3 class="uk-panel-title">Panel box secondary</h3>
                                <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipisicing elit, sed do eiusmod tempor. At vero eos et accusam.</p>
                            </div>
                        </div>

                        <div class="uk-width-medium-1-3">
                            <div class="uk-panel uk-panel-box">
                                <div class="uk-panel-teaser">
                                    <img src="http://placehold.it/400x200&text=demo" width="400" height="200" alt="Placeholder">
                                </div>
                                <h3 class="uk-panel-title">Panel box teaser</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
                            </div>

                            <div class="uk-panel uk-panel-header">
                                <h3 class="uk-panel-title">Panel Header</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
                            </div>
                        </div>

                    </div>

                    <h2 class="bh-headline-bottom-border" id="elements-button"><span>Button</span></h2>

                    <div class="uk-grid" data-uk-grid-margin data-uk-grid-match>

                        <div class="uk-width-1-1" data-uk-margin>
                            <a class="uk-button" href="">Link</a>
                            <button class="uk-button" type="button">Button</button>
                            <button class="uk-button uk-button-primary" type="button">Primary</button>
                            <button class="uk-button uk-button-success" type="button">Success</button>
                            <button class="uk-button uk-button-danger" type="button">Danger</button>
                            <button class="uk-button" type="button" disabled>Disabled</button>
                        </div>

                    </div>

                    <div class="uk-grid" data-uk-grid-margin data-uk-grid-match>

                        <div class="uk-width-medium-3-5" data-uk-margin>
                            <h2 class="uk-h4">Button icons</h2>

                            <button class="uk-button" type="button"><i class="uk-icon-home"></i> Button</button>
                            <button class="uk-button uk-button-primary" type="button"><i class="uk-icon-shopping-cart"></i> Primary</button>
                            <button class="uk-button uk-button-success" type="button"><i class="uk-icon-info-circle"></i> Success</button>
                            <button class="uk-button uk-button-danger" type="button"><i class="uk-icon-heart"></i> Danger</button>
                        </div>

                        <div class="uk-width-medium-2-5">
                            <h2 class="uk-h4">Button Sizes</h2>

                            <button class="uk-button uk-button-large" type="button">Large</button>
                            <button class="uk-button" type="button">Default</button>
                            <button class="uk-button uk-button-small" type="button">Small</button>
                        </div>

                        <div class="uk-width-medium-1-3">
                            <h2 class="uk-h4">Button Group</h2>

                            <div class="uk-button-group">
                                <button class="uk-button">Button</button>
                                <button class="uk-button">Button</button>
                            </div>
                        </div>

                        <div class="uk-width-medium-1-3" data-uk-margin>
                            <h2 class="uk-h4">Button Dropdown</h2>

                            <div class="uk-button-dropdown" data-uk-dropdown>
                                <button class="uk-button">Hover <i class="uk-icon-caret-down"></i></button>

                                <div class="uk-dropdown uk-dropdown-small">
                                    <ul class="uk-nav uk-nav-dropdown">
                                        <li><a href="">Option 1</a></li>
                                        <li><a href="">Option 2</a></li>
                                        <li><a href="">Option 3</a></li>
                                    </ul>
                                </div>
                            </div>

                            <div class="uk-button-dropdown" data-uk-dropdown="{mode:'click'}">
                                <button class="uk-button">Click <i class="uk-icon-caret-down"></i></button>

                                <div class="uk-dropdown uk-dropdown-small">
                                    <ul class="uk-nav uk-nav-dropdown">
                                        <li><a href="">Option 1</a></li>
                                        <li><a href="">Option 2</a></li>
                                        <li><a href="">Option 3</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                    </div>

                    <h2 class="uk-margin-large-top bh-headline-bottom-border" id="elements-form"><span>Form</span></h2>

                    <form class="uk-form">

                        <div class="uk-grid uk-grid-small" data-uk-grid-margin>
                            <div class="uk-width-1-2 uk-width-medium-1-6"><input type="text" placeholder="Text" class="uk-form-large uk-width-1-1"></div>
                            <div class="uk-width-1-2 uk-width-medium-1-6"><input type="text" placeholder="Success" class="uk-form-success uk-form-large uk-width-1-1"></div>
                            <div class="uk-width-1-2 uk-width-medium-1-6"><input type="text" placeholder="Danger" class="uk-form-danger uk-form-large uk-width-1-1"></div>
                            <div class="uk-width-1-2 uk-width-medium-1-6"><input type="text" placeholder="Disabled" class="uk-form-large uk-width-1-1" disabled></div>
                            <div class="uk-width-1-2 uk-width-medium-1-6">
                                <div class="uk-form-icon uk-width-1-1">
                                    <i class="uk-icon-calendar"></i>
                                    <input type="text" placeholder="Icon" class="uk-form-large uk-width-1-1">
                                </div>
                            </div>
                            <div class="uk-width-1-2 uk-width-medium-1-6"><input type="text" placeholder="Blank" class="uk-form-blank uk-form-large uk-width-1-1"></div>
                        </div>

                        <h2 class="uk-h4">Form Sizes</h2>
                        <input type="text" placeholder="Large" class="uk-form-large">
                        <input type="text" placeholder="Default" class="uk-margin-small-top">
                        <input type="text" placeholder="Small" class="uk-form-small uk-margin-small-top">

                        <h2 class="uk-h4">Form Grid</h2>
                        <div class="uk-grid uk-grid-small" data-uk-grid-margin>
                            <div class="uk-width-1-1"><input type="text" placeholder="1/1" class="uk-form-large uk-width-1-1"></div>

                            <div class="uk-width-1-2"><input type="text" placeholder="1/2" class="uk-form-large uk-width-1-1"></div>
                            <div class="uk-width-1-2"><input type="text" placeholder="1/2" class="uk-form-large uk-width-1-1"></div>

                            <div class="uk-width-1-3"><input type="text" placeholder="1/3" class="uk-form-large uk-width-1-1"></div>
                            <div class="uk-width-1-3"><input type="text" placeholder="1/3" class="uk-form-large uk-width-1-1"></div>
                            <div class="uk-width-1-3"><input type="text" placeholder="1/3" class="uk-form-large uk-width-1-1"></div>

                            <div class="uk-width-1-2 uk-width-medium-1-4"><input type="text" placeholder="1/4" class="uk-form-large uk-width-1-1"></div>
                            <div class="uk-width-1-2 uk-width-medium-1-4"><input type="text" placeholder="1/4" class="uk-form-large uk-width-1-1"></div>
                            <div class="uk-width-1-2 uk-width-medium-1-4"><input type="text" placeholder="1/4" class="uk-form-large uk-width-1-1"></div>
                            <div class="uk-width-1-2 uk-width-medium-1-4"><input type="text" placeholder="1/4" class="uk-form-large uk-width-1-1"></div>

                            <div class="uk-width-1-3 uk-width-medium-1-5"><input type="text" placeholder="1/5" class="uk-form-large uk-width-1-1"></div>
                            <div class="uk-width-1-3 uk-width-medium-1-5"><input type="text" placeholder="1/5" class="uk-form-large uk-width-1-1"></div>
                            <div class="uk-width-1-3 uk-width-medium-1-5"><input type="text" placeholder="1/5" class="uk-form-large uk-width-1-1"></div>
                            <div class="uk-width-1-2 uk-width-medium-1-5"><input type="text" placeholder="1/5" class="uk-form-large uk-width-1-1"></div>
                            <div class="uk-width-1-2 uk-width-medium-1-5"><input type="text" placeholder="1/5" class="uk-form-large uk-width-1-1"></div>

                            <div class="uk-width-1-3 uk-width-medium-1-6"><input type="text" placeholder="1/6" class="uk-form-large uk-width-1-1"></div>
                            <div class="uk-width-1-3 uk-width-medium-1-6"><input type="text" placeholder="1/6" class="uk-form-large uk-width-1-1"></div>
                            <div class="uk-width-1-3 uk-width-medium-1-6"><input type="text" placeholder="1/6" class="uk-form-large uk-width-1-1"></div>
                            <div class="uk-width-1-3 uk-width-medium-1-6"><input type="text" placeholder="1/6" class="uk-form-large uk-width-1-1"></div>
                            <div class="uk-width-1-3 uk-width-medium-1-6"><input type="text" placeholder="1/6" class="uk-form-large uk-width-1-1"></div>
                            <div class="uk-width-1-3 uk-width-medium-1-6"><input type="text" placeholder="1/6" class="uk-form-large uk-width-1-1"></div>

                            <div class="uk-width-1-2 uk-width-medium-1-5 uk-width-large-1-10"><input type="text" placeholder="1/10" class="uk-form-large uk-width-1-1"></div>
                            <div class="uk-width-1-2 uk-width-medium-1-5 uk-width-large-1-10"><input type="text" placeholder="1/10" class="uk-form-large uk-width-1-1"></div>
                            <div class="uk-width-1-2 uk-width-medium-1-5 uk-width-large-1-10"><input type="text" placeholder="1/10" class="uk-form-large uk-width-1-1"></div>
                            <div class="uk-width-1-2 uk-width-medium-1-5 uk-width-large-1-10"><input type="text" placeholder="1/10" class="uk-form-large uk-width-1-1"></div>
                            <div class="uk-width-1-2 uk-width-medium-1-5 uk-width-large-1-10"><input type="text" placeholder="1/10" class="uk-form-large uk-width-1-1"></div>
                            <div class="uk-width-1-2 uk-width-medium-1-5 uk-width-large-1-10"><input type="text" placeholder="1/10" class="uk-form-large uk-width-1-1"></div>
                            <div class="uk-width-1-2 uk-width-medium-1-5 uk-width-large-1-10"><input type="text" placeholder="1/10" class="uk-form-large uk-width-1-1"></div>
                            <div class="uk-width-1-2 uk-width-medium-1-5 uk-width-large-1-10"><input type="text" placeholder="1/10" class="uk-form-large uk-width-1-1"></div>
                            <div class="uk-width-1-2 uk-width-medium-1-5 uk-width-large-1-10"><input type="text" placeholder="1/10" class="uk-form-large uk-width-1-1"></div>
                            <div class="uk-width-1-2 uk-width-medium-1-5 uk-width-large-1-10"><input type="text" placeholder="1/10" class="uk-form-large uk-width-1-1"></div>
                        </div>

                    </form>

                    <h2 class="uk-margin-large-top bh-headline-bottom-border" id="elements-alert"><span>Alert</span></h2>

                    <div class="uk-grid" data-uk-grid-margin>

                        <div class="uk-width-small-1-2">
                            <div class="uk-alert">
                                <a href="" class="uk-alert-close uk-close"></a>
                                <p>This is an info message.</p>
                            </div>
                            <div class="uk-alert uk-alert-warning">
                                <a href="" class="uk-alert-close uk-close"></a>
                                <p>This is a warning message.</p>
                            </div>
                        </div>

                        <div class="uk-width-small-1-2">
                            <div class="uk-alert uk-alert-success">
                                <a href="" class="uk-alert-close uk-close"></a>
                                <p>This is a success message.</p>
                            </div>
                            <div class="uk-alert uk-alert-danger">
                                <a href="" class="uk-alert-close uk-close"></a>
                                <p>This is a danger message.</p>
                            </div>
                        </div>

                    </div>

                    <h2 class="uk-margin-large-top bh-headline-bottom-border" id="elements-progress"><span>Progress</span></h2>

                    <div class="uk-grid" data-uk-grid-margin>

                        <div class="uk-width-medium-1-3">
                            <h2 class="uk-h4">Colors</h2>
                            <div class="uk-progress">
                                <div class="uk-progress-bar bh-width-20">20%</div>
                            </div>
                            <div class="uk-progress uk-progress-success">
                                <div class="uk-progress-bar bh-width-40">40%</div>
                            </div>
                            <div class="uk-progress uk-progress-warning">
                                <div class="uk-progress-bar bh-width-60">60%</div>
                            </div>
                            <div class="uk-progress uk-progress-danger">
                                <div class="uk-progress-bar bh-width-80">80%</div>
                            </div>

                        </div>

                        <div class="uk-width-medium-1-3">
                            <h2 class="uk-h4">Progress Striped</h2>
                            <div class="uk-progress uk-progress-striped">
                                <div class="uk-progress-bar bh-width-20">20%</div>
                            </div>
                            <div class="uk-progress uk-progress-striped uk-progress-success">
                                <div class="uk-progress-bar bh-width-40">40%</div>
                            </div>
                            <div class="uk-progress uk-progress-striped uk-active uk-progress-warning">
                                <div class="uk-progress-bar bh-width-60">60%</div>
                            </div>
                            <div class="uk-progress uk-progress-striped uk-active uk-progress-danger">
                                <div class="uk-progress-bar bh-width-80">80%</div>
                            </div>
                        </div>

                        <div class="uk-width-medium-1-3">
                            <h2 class="uk-h4">Progress Sizes</h2>
                            <div class="uk-progress uk-progress-mini">
                                <div class="uk-progress-bar bh-width-20"></div>
                            </div>
                            <div class="uk-progress uk-progress-small">
                                <div class="uk-progress-bar bh-width-40"></div>
                            </div>
                            <div class="uk-progress">
                                <div class="uk-progress-bar bh-width-60"></div>
                            </div>
                        </div>

                    </div>

                    <h2 class="uk-margin-large-top bh-headline-bottom-border" id="elements-tab"><span>Tab</span></h2>

                    <h2 class="uk-h4">Standard and Flip Tab</h2>

                    <ul class="uk-tab" data-uk-tab>
                        <li class="uk-active"><a href="">Tab One</a></li>
                        <li><a href="">Tab Two</a></li>
                        <li class="uk-disabled"><a href="">Tab disabled</a></li>
                    </ul>

                    <ul class="uk-tab uk-tab-flip uk-margin" data-uk-tab>
                        <li class="uk-active"><a href="">Tab One</a></li>
                        <li><a href="">Tab Two</a></li>
                        <li><a href="">Tab Three</a></li>
                    </ul>

                    <h2 class="uk-h4">Center and Bottom Tab</h2>

                    <div class="uk-tab-center">
                        <ul class="uk-tab uk-tab-center" data-uk-tab>
                            <li class="uk-active"><a href="">Tab One</a></li>
                            <li><a href="">Tab Two</a></li>
                            <li><a href="">Tab Three</a></li>
                        </ul>
                    </div>

                    <ul class="uk-tab uk-tab-bottom uk-margin" data-uk-tab>
                        <li class="uk-active"><a href="">Tab One</a></li>
                        <li><a href="">Tab Two</a></li>
                        <li><a href="">Tab Three</a></li>
                    </ul>

                    <h2 class="uk-h4">Left and Right Tab</h2>

                    <div class="uk-grid" data-uk-grid-margin>
                        <div class="uk-width-medium-1-2">
                            <ul class="uk-tab uk-tab-left" data-uk-tab>
                                <li class="uk-active"><a href="">Tab One</a></li>
                                <li><a href="">Tab Two</a></li>
                                <li><a href="">Tab Three</a></li>
                            </ul>
                        </div>

                        <div class="uk-width-medium-1-2">
                            <ul class="uk-tab uk-tab-right" data-uk-tab>
                                <li class="uk-active"><a href="">Tab One</a></li>
                                <li><a href="">Tab Two</a></li>
                                <li><a href="">Tab Three</a></li>
                            </ul>
                        </div>
                    </div>

                    <h2 class="uk-margin-large-top bh-headline-bottom-border" id="elements-table"><span>Table</span></h2>

                    <div class="uk-grid" data-uk-grid-margin>

                        <div class="uk-width-medium-1-2">
                            <table class="uk-table uk-table-hover">
                                <caption>Hover Table</caption>
                                <thead>
                                    <tr>
                                        <th>Heading</th>
                                        <th>Heading</th>
                                        <th>Heading</th>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr>
                                        <td>Footer</td>
                                        <td>Footer</td>
                                        <td>Footer</td>
                                    </tr>
                                </tfoot>
                                <tbody>
                                    <tr>
                                        <td>Cell Content</td>
                                        <td>Cell Content</td>
                                        <td>Cell Content</td>
                                    </tr>
                                    <tr>
                                        <td>Cell Content</td>
                                        <td>Cell Content</td>
                                        <td>Cell Content</td>
                                    </tr>
                                    <tr>
                                        <td>Cell Content</td>
                                        <td>Cell Content</td>
                                        <td>Cell Content</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <div class="uk-width-medium-1-2">
                            <table class="uk-table uk-table-striped">
                                <caption>Striped Table</caption>
                                <thead>
                                    <tr>
                                        <th>Heading</th>
                                        <th>Heading</th>
                                        <th>Heading</th>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr>
                                        <td>Footer</td>
                                        <td>Footer</td>
                                        <td>Footer</td>
                                    </tr>
                                </tfoot>
                                <tbody>
                                    <tr>
                                        <td>Cell Content</td>
                                        <td>Cell Content</td>
                                        <td>Cell Content</td>
                                    </tr>
                                    <tr>
                                        <td>Cell Content</td>
                                        <td>Cell Content</td>
                                        <td>Cell Content</td>
                                    </tr>
                                    <tr>
                                        <td>Cell Content</td>
                                        <td>Cell Content</td>
                                        <td>Cell Content</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                    </div>

                    <h2 class="uk-margin-large-top bh-headline-bottom-border" id="elements-overlay"><span>Overlay</span></h2>

                    <div class="uk-grid" data-uk-grid-margin>

                        <div class="uk-width-1-1">

                            <p>This is how the default overlay component looks like. There are a lot more options you can combine. Check out <a href="http://getuikit.com/docs/overlay.html" target="_blank">UIkit Overlay</a>.</p>

                            <div class="uk-grid" data-uk-grid-margin>

                                <div class="uk-width-small-1-3">
                                    <figure class="uk-overlay uk-overlay-hover">
                                        <img src="http://placehold.it/600x400&text=demo" width="600" height="400" alt="Placeholder">
                                        <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade uk-flex uk-flex-center uk-flex-middle uk-text-center">
                                        </figcaption>
                                    </figure>
                                </div>

                                <div class="uk-width-small-1-3">
                                    <figure class="uk-overlay uk-overlay-hover">
                                        <img src="http://placehold.it/600x400&text=demo" width="600" height="400" alt="Placeholder">
                                        <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-bottom uk-overlay-slide-bottom uk-flex uk-flex-center uk-flex-middle uk-text-center">
                                            <div>
                                                <p class="uk-margin-small">Lorem ipsum dolor sit amet.</p>
                                            </div>
                                        </figcaption>
                                    </figure>
                                </div>

                            </div>

                        </div>
                    </div>

    	            <h2 class="uk-margin-large-top bh-headline-bottom-border" id="elements-thumbnail"><span>Thumbnail</span></h2>

                    <div class="uk-grid" data-uk-grid-margin>

                        <div class="uk-width-small-1-3">
                            <h2 class="uk-h4">Thumbnail anchor</h2>
                            <a class="uk-thumbnail" href=""><img src="http://placehold.it/400x300&text=demo" width="400" height="300" alt="Placeholder"></a>
                        </div>

                        <div class="uk-width-small-1-3">
                            <h2 class="uk-h4">Thumbnail with overlay</h2>
                            <a class="uk-thumbnail uk-overlay-toggle" href="">
                                <figure class="uk-overlay uk-overlay-hover">
                                    <img src="http://placehold.it/600x400&text=demo" width="600" height="400" alt="Placeholder">
                                    <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-bottom uk-overlay-slide-bottom uk-flex uk-flex-center uk-flex-middle uk-text-center">
                                        <div>
                                            <p class="uk-margin-small">Lorem ipsum dolor sit amet.</p>
                                        </div>
                                    </figcaption>
                                </figure>
                            </a>
                        </div>

                        <div class="uk-width-small-1-3">
                            <h2 class="uk-h4">Thumbnail Caption</h2>
                            <a class="uk-thumbnail" href="">
                                <img src="http://placehold.it/400x300&text=demo" width="400" height="300" alt="Placeholder">
                                <div class="uk-thumbnail-caption">Thumbnail Caption</div>
                            </a>
                        </div>

                    </div>

                </article>
            </div>
        </div>
    </div>
</div>

            <footer class="bh-footer uk-text-center-small">
                <div class="uk-container uk-container-center uk-position-relative">
                    <a href="frontpage.html"><img src="http://placehold.it/60x60&text=demo" class="uk-margin-right" alt="Footer Logo" width="60" height="60" data-demo-style></a>
                    <span class="uk-hidden-small">
                        Copyright &copy; 2015 <a href="http://www.bahemian.com" target="_blank">Bahemian</a>. Built with so, so much love <i class="uk-icon-heart uk-text-primary uk-margin-small-left"></i>
                    </span>
                    <a class="bh-topscroller" data-uk-smooth-scroll href="#"><i class="uk-icon-angle-up"></i></a>
                </div>
            </footer>

            <div id="offcanvas" class="uk-offcanvas">
                <div class="uk-offcanvas-bar">
                    <form class="uk-search">
                        <input class="uk-search-field" type="search" placeholder="Search...">
                    </form>
                    <ul class="uk-nav uk-nav-offcanvas">
                        <li class="uk-parent">
                            <a href="frontpage.html">Home</a>
                            <ul class="uk-nav-sub">
                                <li>
                                    <a href="?style=default">Light</a>
                                </li>
                                <li>
                                    <a href="?style=dark">Dark</a>
                                </li>
                            </ul>
                        </li>
                        <li class="uk-parent">
                            <a href="#">Pages</a>
                            <ul class="uk-nav-sub">
                                <li>
                                    <a href="pages-about.html">About us</a>
                                </li>
                                <li>
                                    <a href="pages-team.html">Team</a>
                                </li>
                                <li>
                                    <a href="pages-service.html">Service</a>
                                </li>
                                <li>
                                    <a href="pages-portfolio.html">Portfolio</a>
                                </li>
                                <li>
                                    <a href="pages-contact.html">Contact</a>
                                </li>
                                <li>
                                    <a href="pages-error.html">Error</a>
                                </li>
                            </ul>
                        </li>
                        <li class="uk-parent">
                            <a href="shop.html">Shop</a>
                            <ul class="uk-nav-sub">
                                <li>
                                    <a href="shop-singleproduct.html">Single Product</a>
                                </li>
                                <li>
                                    <a href="shop-cart.html">Cart</a>
                                </li>
                                <li>
                                    <a href="shop-checkout.html">Checkout</a>
                                </li>
                                <li>
                                    <a href="shop-wishlist.html">Wishlist</a>
                                </li>
                            </ul>
                        </li>
                        <li class="uk-parent">
                            <a href="features.html">Features</a>
                            <ul class="uk-nav-sub">
                                <li>
                                    <a href="features-columns.html">Columns</a>
                                </li>
                                <li>
                                    <a href="features-uikit-elements.html">UIkit Elements</a>
                                </li>
                                <li>
                                    <a href="features-theme-elements.html">Theme Elements</a>
                                </li>
                                <li>
                                    <a href="features-typography.html">Typhography</a>
                                </li>
                                <li>
                                    <a href="features-icons.html">Icons</a>
                                </li>
                            </ul>
                        </li>
                        <li class="uk-parent">
                            <a href="blog.html">Blog</a>
                            <ul class="uk-nav-sub">
                                <li>
                                    <a href="blog-singlepost.html">Single Post</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>

            <div id="offcanvas-cart" class="uk-offcanvas bh-offcanvas-light">
                <div class="uk-offcanvas-bar uk-offcanvas-bar-flip">
                    <div class="uk-panel">
                        <h3 class="bh-headline-bottom-border uk-margin-remove"><span>Cart</span></h3>
                        <table class="bh-offcanvas-shopping-cart uk-table uk-table-middle uk-margin-small-top uk-margin-bottom-remove">
                            <tbody>
                                <tr>
                                    <td>
                                        <a href="shop-singleproduct.html">
                                            <img src="http://placehold.it/100x75&text=demo" width="100" height="75" alt="Product Image">
                                        </a>
                                    </td>
                                    <td>
                                        <a class="bh-text-uppercase" href="shop-singleproduct.html">Workboots</a><br>
                                        $119.90
                                    </td>
                                    <td class="uk-text-center"><a href="#"><i class="uk-icon-times"></i></a></td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="shop-singleproduct.html">
                                            <img src="http://placehold.it/100x75&text=demo" width="100" height="75" alt="Product Image">
                                        </a>
                                    </td>
                                    <td>
                                        <a class="bh-text-uppercase" href="shop-singleproduct.html">Wayfarer Glasses</a><br>
                                        $89.90
                                    </td>
                                    <td class="uk-text-center"><a href="#"><i class="uk-icon-times"></i></a></td>
                                </tr>
                            </tbody>
                        </table>
                        <a href="shop-cart.html" class="uk-button uk-width-1-1">View Cart</a>
                        <a href="shop-checkout.html" class="uk-button uk-button-primary uk-width-1-1 uk-margin-small-top">Go to Checkout</a>
                    </div>
                </div>
            </div>

            <div id="login" class="uk-modal">
                <div class="uk-modal-dialog">
                    <a class="uk-modal-close uk-close"></a>

                    <ul class="uk-tab uk-tab-grid" data-uk-tab="{connect:'#login-tab'}">
                        <li class="uk-width-small-1-2 uk-active"><a href="#">Login</a></li>
                        <li class="uk-width-small-1-2"><a href="#">Register</a></li>
                    </ul>

                    <ul id="login-tab" class="uk-switcher uk-margin">
                        <li class="uk-active">
                            <form class="uk-form">
                                <div class="uk-grid" data-uk-margin="{cls:'uk-margin-top'}">
                                    <div class="uk-width-1-1 uk-text-center">
                                        <h3>I'm already a member</h3>
                                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr<br> sed diam nonumy eirmod tempor invidunt.</p>
                                    </div>
                                    <div class="uk-width-1-1">
                                        <input type="text" placeholder="Username" class="uk-form-large uk-width-1-1">
                                    </div>
                                    <div class="uk-width-1-1">
                                        <input type="text" placeholder="Password" class="uk-form-large uk-width-1-1">
                                    </div>
                                    <div class="uk-width-1-1 uk-text-center">
                                        <label><input type="checkbox"> Remember me</label>
                                        <a class="uk-margin-left" href="#">Lost Password?</a>
                                    </div>
                                    <div class="uk-width-1-1 uk-text-center">
                                        <button class="uk-button uk-text-center">Login</button>
                                    </div>
                                </div>
                            </form>
                        </li>
                        <li>
                            <form class="uk-form">
                                <div class="uk-grid" data-uk-margin="{cls:'uk-margin-top'}">
                                    <div class="uk-width-1-1 uk-text-center">
                                        <h3>I'm new here</h3>
                                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr<br> sed diam nonumy eirmod tempor invidunt.</p>
                                    </div>
                                    <div class="uk-width-1-1">
                                        <input type="text" placeholder="Username" class="uk-form-large uk-width-1-1">
                                    </div>
                                    <div class="uk-width-1-1">
                                        <input type="text" placeholder="Password" class="uk-form-large uk-width-1-1">
                                    </div>
                                    <div class="uk-width-1-1 uk-text-center">
                                        <button class="uk-button uk-text-center">Register</button>
                                    </div>
                                </div>
                            </form>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- vendor scripts -->
            <script src="assets/jquery.js"></script>
            <script src="assets/jquery.velocity.min.js"></script>
            <script src="assets/uikit/js/uikit.js"></script>
            <script src="assets/holder.js"></script>
            <script src="assets/countUp.js"></script>
            <script src="assets/uikit/js/components/accordion.min.js"></script>
            <script src="assets/uikit/js/components/grid.min.js"></script>
            <script src="assets/uikit/js/components/lightbox.min.js"></script>
            <script src="assets/uikit/js/components/search.min.js"></script>
            <script src="assets/uikit/js/components/slideshow.min.js"></script>
            <script src="assets/uikit/js/components/slideshow-fx.min.js"></script>
            <script src="assets/uikit/js/components/sticky.min.js"></script>
            <script src="assets/uikit/js/components/slider.min.js"></script>

            <!-- theme scripts -->
            <script src="js/theme.js"></script>

            <!-- demo related script - remove it!  -->
            <script src="demo.js"></script>
    </body>
</html>
